{% extends "admin/base_site.html" %}
{% load static %}
{% block breadcrumbs %}
<div class="breadcrumbs">
    <a href="{% url 'admin:index' %}">首页</a>
    &rsaquo; <a href="">客户端</a>
    &rsaquo; 上传-查询
</div>
{% endblock %}

{% block extrahead %}
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#upload').on('click', function () {
            var name = $('#client_no').val();
            var score = $('#client_value').val();
            $.post('/upload_data/',
                  {name:name, score:score},
                  function (data) {
                       alert(data.msg);
                  location.href = '/client/';

             })

        });
         $('#search').on('click', function () {
            var start_ = $('#start_').val();
            var end_ = $('#end_').val();
            var name = $('#client_no2').val();
            $.post('/search/',
                  {start_:start_, end_:end_, name:name},
                  function (data) {
                    var result = data.data;
                    var msg = data.msg;
                    var code = data.code;
                    var html_ = '';
                    var count = result.length;
                    if(code ==200){
                        $('#show').text('');
                       for(var i=0; i<count;i++){
                            row = result[i];
                            console.log(row);
                            html_+="<tr><td>" + row.index + "</td><td>"+row.name+"</td><td>"+row.score+"</td></tr>";
                       }
                          $('#show').prepend(html_);
                    }else{
                        $('#show').prepend(msg);

                    }

            })

        });

    });


</script>

{% endblock %}

{% block extrastyle %}
<link href="{% static 'dataTables/css/jquery.dataTables.css' %}" rel="stylesheet">
<style>
        .dt-buttons {
            visibility: hidden;
            height: 10px;
        }

        table {
            border-spacing: 0;
            border-collapse: collapse !important;

        }

        thead th, table.dataTable thead td {
            padding: 10px 18px;
            border-bottom: 1px !important;
            vertical-align:middle;
            text-align: center;
        }

</style>
{% endblock %}


{% block content %}
<div class="ibox">
    <div class="ibox-title">
        <h3>上传功能</h3>
    </div>
    <div class="ibox-content">
        <div class="row">
            <div class="col-sm-12 m-b-xs">
                <div class="form-group" id="date_select">
                    <div class="input-daterange input-group">
                        <span class="input-group-addon">客户端:</span>
                        <input type="text" class="input-sm form-control" id="client_no"
                               value="">
                        <span class="input-group-addon">分数：</span>
                        <input type="text" class="input-sm form-control" id="client_value"
                               value="">
                        <button id="upload" class="btn btn-primary" type="button"><i class="fa fa-search"></i>上传
                        </button>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-daterange input-group">
                        <span class="input-group-addon">客户端:</span>
                        <input type="text" class="input-sm form-control" id="client_no2"
                               value="">
                        <span class="input-group-addon">从:</span>
                        <input type="text" class="input-sm form-control" id="start_"
                               value="1">
                        <span class="input-group-addon">至：</span>
                        <input type="text" class="input-sm form-control" id="end_"
                               value="10">
                        <button id="search" class="btn btn-primary" type="button"><i class="fa fa-search"></i>查询
                        </button>
                    </div>
                </div>
                </button>
            </div>
        </div>
        <div class="row" style="margin-top: 10px;">
            <div class="col-sm-2 m-b-xs">
                <h3>查询结果：{{ num }}</h3>
            </div>
        </div>
        <table class="table table-bordered" id="result">
            <thead>
            <tr>
                <th colspan="15" style="background-color: #1fa681; color: white">客户端分数查询</th>
            </tr>
            <tr>
                <th rowspan="2" style="background-color: #badba5;">排名</th>
                <th rowspan="2" style="background-color: #badba5;">名称</th>
                <th rowspan="2" style="background-color: #badba5;">分数</th>
            </tr>
            </thead>
            <tbody id="show">


            </tbody>
        </table>
    </div>
</div>
{% endblock %}